TypeScript 모든 것

// JavaScript: 아무런 경고 없이 실행됨
function greet(user) {
  return "Hello, " + user.name.toUpperCase();
}

greet(undefined);
// 💥 런타임 에러: Cannot read properties of undefined (reading 'name')

// TypeScript: 코드 작성 시점에 에러 감지
interface User {
  name: string;
  email: string;
}

function greet(user: User): string {
  return "Hello, " + user.name.toUpperCase();
}

greet(undefined);
// ❌ 컴파일 에러: Argument of type 'undefined' is not assignable to parameter of type 'User'

# Node.js 버전 확인
node --version    # v20.x.x 이상 권장
npm --version     # 10.x.x

# 글로벌 설치 (어디서든 tsc 명령어 사용 가능)
npm install -g typescript

# 프로젝트 로컬 설치 (권장 - 팀원과 버전 통일)
npm install -D typescript

# 버전 확인
tsc --version     # Version 5.x.x 또는 6.x.x

# 새 프로젝트 디렉터리 생성
mkdir my-ts-project && cd my-ts-project

# package.json 생성
npm init -y

# TypeScript 설치
npm install -D typescript

# tsconfig.json 생성 (TypeScript 설정 파일)
npx tsc --init

const message: string = "Hello, TypeScript!";
console.log(message);

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(3, 5)); // 8

# 컴파일: .ts → .js 변환
npx tsc hello.ts

# 실행
node hello.js

# 또는 ts-node로 한 번에 (컴파일 + 실행)
npx ts-node hello.ts

# 또는 tsx로 한 번에 (더 빠름, ESM 지원)
npx tsx hello.ts

// 타입 어노테이션 (명시적)
let username: string = "김민수";
let age: number = 28;
let isActive: boolean = true;

// 타입 추론 (TypeScript가 자동으로 타입을 알아냄)
let city = "서울";           // string으로 추론
let score = 95;              // number로 추론
let isDone = false;          // boolean으로 추론

// 타입이 맞지 않으면 에러!
username = 42;
// ❌ Type 'number' is not assignable to type 'string'

// 배열: 같은 타입의 요소 목록
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob"];
let mixed: (string | number)[] = ["hello", 42];

// Array<T> 제네릭 문법 (동일한 의미)
let items: Array<string> = ["a", "b", "c"];

// 튜플(Tuple): 고정 길이, 각 위치의 타입이 정해진 배열
let person: [string, number] = ["김민수", 28];
let coordinate: [number, number] = [37.5665, 126.978];

// 옵셔널 요소가 있는 튜플
let flexible: [string, number?] = ["hello"]; // 두 번째 요소 생략 가능

// 나머지 요소가 있는 튜플
let row: [string, ...number[]] = ["scores", 90, 85, 92];

// any: 타입 검사 완전 비활성화 (위험!)
let danger: any = "hello";
danger.nonExistentMethod(); // 에러 없음! → 런타임에서 터짐
danger.foo.bar.baz;         // 에러 없음! → 런타임에서 터짐

// unknown: 안전한 any
let safe: unknown = "hello";
safe.toUpperCase(); // ❌ 에러! unknown에서는 바로 사용 불가

// typeof로 타입 확인 후 사용 (타입 좁히기)
if (typeof safe === "string") {
  safe.toUpperCase(); // ✅ 이제 string으로 확정, 사용 가능!
}

// let은 넓은 타입으로 추론
let changeable = "hello";  // 타입: string

// const는 리터럴 타입으로 추론
const fixed = "hello";      // 타입: "hello" (문자열 리터럴)

// 리터럴 타입을 활용한 제한
type Direction = "up" | "down" | "left" | "right";
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;
type Toggle = true | false;

function move(direction: Direction) { /* ... */ }
move("up");    // ✅
move("north"); // ❌ '"north"'는 'Direction'에 할당할 수 없습니다

// 기본적인 함수 타입 지정
function add(a: number, b: number): number {
  return a + b;
}

// 화살표 함수
const multiply = (a: number, b: number): number => a * b;

// 반환값이 없는 함수 → void
function logMessage(msg: string): void {
  console.log(msg);
}

// 절대 반환하지 않는 함수 → never
function throwError(message: string): never {
  throw new Error(message);
}

// 선택적 매개변수: 이름 뒤에 ? (항상 필수 매개변수 뒤에 위치)
function greet(name: string, greeting?: string): string {
  return `${greeting ?? "안녕하세요"}, ${name}님!`;
}
greet("민수");              // "안녕하세요, 민수님!"
greet("민수", "환영합니다"); // "환영합니다, 민수님!"

// 기본값 매개변수
function createUser(name: string, role: string = "user"): string {
  return `${name} (${role})`;
}
createUser("Alice");          // "Alice (user)"
createUser("Bob", "admin");  // "Bob (admin)"

function sum(...nums: number[]): number {
  return nums.reduce((acc, cur) => acc + cur, 0);
}
sum(1, 2, 3);        // 6
sum(10, 20, 30, 40); // 100

// 함수 타입 표현식
type MathOperation = (a: number, b: number) => number;

const add: MathOperation = (a, b) => a + b;
const subtract: MathOperation = (a, b) => a - b;

// 콜백 함수 타입 지정
function calculate(a: number, b: number, operation: MathOperation): number {
  return operation(a, b);
}
calculate(10, 5, add);      // 15
calculate(10, 5, subtract); // 5

// 오버로드 시그니처
function format(value: string): string;
function format(value: number, decimals: number): string;

// 구현 시그니처 (외부에서 직접 호출할 수 없음)
function format(value: string | number, decimals?: number): string {
  if (typeof value === "string") {
    return value.trim();
  }
  return value.toFixed(decimals);
}

format("  hello  ");   // "hello"
format(3.14159, 2);   // "3.14"

// 인터페이스 정의
interface User {
  id: number;
  name: string;
  email: string;
  age?: number;           // 선택적 속성
  readonly createdAt: Date; // 읽기 전용 (수정 불가)
}

// 인터페이스를 타입으로 사용
const user: User = {
  id: 1,
  name: "김민수",
  email: "minsu@mail.com",
  createdAt: new Date()
};

user.createdAt = new Date(); // ❌ readonly 속성은 수정 불가

interface Animal {
  name: string;
  age: number;
}

interface Dog extends Animal {
  breed: string;
  bark(): void;
}

interface ServiceDog extends Dog {
  certification: string;
  handler: string;
}

// 다중 상속도 가능!
interface Serializable {
  toJSON(): string;
}

interface Loggable {
  log(): void;
}

interface TrackedUser extends User, Serializable, Loggable {
  lastLogin: Date;
}

interface Window {
  title: string;
}

interface Window {
  appVersion: string;
}

// 결과적으로 Window는 { title: string; appVersion: string; }
const w: Window = {
  title: "My App",
  appVersion: "1.0.0"
};

interface Dictionary {
  [key: string]: string;
}

const colors: Dictionary = {
  red: "#ff0000",
  blue: "#0000ff",
  green: "#00ff00",
  // 어떤 키든 추가 가능, 단 값은 반드시 string
};

interface Scores {
  [subject: string]: number;
  // 고정 속성과 인덱스 시그니처 병합 가능
  total: number; // 단, 인덱스 시그니처의 타입과 호환되어야 함
}

// 원시 타입 별칭
type ID = string | number;
type Email = string;

// 객체 타입 별칭
type Point = {
  x: number;
  y: number;
};

// 함수 타입 별칭
type Formatter = (input: string) => string;

// 튜플 타입 별칭
type Coordinate = [number, number];

// 리터럴 유니온 타입 별칭
type Status = "pending" | "active" | "closed";

type StringOrNumber = string | number;

function printId(id: StringOrNumber) {
  // id가 string인지 number인지 모르는 상태
  // 두 타입에 공통으로 존재하는 메서드만 사용 가능
  console.log(id.toString()); // ✅ 두 타입 모두 toString() 보유

  // 타입 좁히기 후 각 타입에 맞는 메서드 사용 가능
  if (typeof id === "string") {
    console.log(id.toUpperCase()); // ✅ string 확정
  } else {
    console.log(id.toFixed(2));    // ✅ number 확정
  }
}

interface Circle {
  kind: "circle";   // ← 판별자 (discriminant)
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

interface Triangle {
  kind: "triangle";
  base: number;
  height: number;
}

type Shape = Circle | Rectangle | Triangle;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "rectangle":
      return shape.width * shape.height;
    case "triangle":
      return (shape.base * shape.height) / 2;
  }
}

type HasName = { name: string };
type HasAge = { age: number };
type HasEmail = { email: string };

// 인터섹션: 세 타입의 모든 속성을 가져야 함
type Person = HasName & HasAge & HasEmail;

const person: Person = {
  name: "김민수",
  age: 28,
  email: "minsu@mail.com"
  // 하나라도 빠지면 에러!
};

// ❌ any를 쓰면 타입 정보가 사라짐
function firstElementAny(arr: any[]): any {
  return arr[0];
}
const result = firstElementAny([1, 2, 3]); // result: any 😢

// ✅ 제네릭: 타입 정보가 보존됨
function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const num = firstElement([1, 2, 3]);        // num: number | undefined
const str = firstElement(["a", "b"]);       // str: string | undefined
const explicit = firstElement<boolean>([true]); // 명시적 지정도 가능

// API 응답 구조를 제네릭으로 추상화
interface ApiResponse<T> {
  success: boolean;
  data: T;
  error?: string;
  timestamp: number;
}

interface User { id: number; name: string; }
interface Product { id: number; title: string; price: number; }

// 같은 구조, 다른 데이터
type UserResponse = ApiResponse<User>;
type ProductListResponse = ApiResponse<Product[]>;

// 여러 타입 매개변수
interface KeyValuePair<K, V> {
  key: K;
  value: V;
}
const pair: KeyValuePair<string, number> = { key: "age", value: 28 };

// T는 반드시 length 속성을 가져야 함
interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(item: T): T {
  console.log(`Length: ${item.length}`);
  return item;
}

logLength("hello");     // ✅ string은 length가 있음
logLength([1, 2, 3]);  // ✅ 배열도 length가 있음
logLength(42);          // ❌ number에는 length가 없음

// keyof와 함께 사용: 객체의 키를 안전하게 접근
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: "Alice", age: 30 };
getProperty(user, "name");  // ✅ 반환 타입: string
getProperty(user, "age");   // ✅ 반환 타입: number
getProperty(user, "email"); // ❌ 'email'은 'name' | 'age'에 없음

// 타입 매개변수에 기본값 지정
interface Container<T = string> {
  value: T;
}

const a: Container = { value: "hello" };         // T = string (기본값)
const b: Container<number> = { value: 42 };       // T = number (명시)

class User {
  // 속성 선언과 접근 제어자
  public name: string;         // 어디서든 접근 가능 (기본값)
  private password: string;    // 클래스 내부에서만 접근
  protected email: string;     // 클래스 내부 + 자식 클래스에서 접근
  readonly id: number;         // 생성 후 변경 불가

  constructor(id: number, name: string, email: string, password: string) {
    this.id = id;
    this.name = name;
    this.email = email;
    this.password = password;
  }

  // 메서드
  greet(): string {
    return `안녕하세요, ${this.name}입니다.`;
  }
}

// 생성자 매개변수 축약 문법 (매우 자주 사용!)
class Product {
  constructor(
    public readonly id: number,
    public name: string,
    public price: number,
    private stock: number = 0
  ) {}
  // 위 코드만으로 속성 선언 + 할당이 모두 끝남!
}

interface Printable {
  print(): void;
}

interface Savable {
  save(): Promise<void>;
}

// 클래스가 여러 인터페이스를 구현
class Document implements Printable, Savable {
  constructor(public content: string) {}

  print(): void {
    console.log(this.content);
  }

  async save(): Promise<void> {
    // 저장 로직
    console.log("저장 완료");
  }
}

abstract class Shape {
  abstract getArea(): number;    // 자식이 반드시 구현
  abstract describe(): string;  // 자식이 반드시 구현

  // 구현된 메서드: 모든 자식이 공유
  displayArea(): void {
    console.log(`면적: ${this.getArea()}`);
  }
}

class Circle extends Shape {
  constructor(private radius: number) { super(); }

  getArea(): number { return Math.PI * this.radius ** 2; }
  describe(): string { return `반지름 ${this.radius}인 원`; }
}

// const shape = new Shape(); // ❌ 추상 클래스는 직접 인스턴스 생성 불가
const circle = new Circle(5);
circle.displayArea(); // "면적: 78.53981633974483"

enum Direction {
  Up,      // 0
  Down,    // 1
  Left,    // 2
  Right    // 3
}

enum HttpStatus {
  OK = 200,
  NotFound = 404,
  InternalError = 500
}

function handleResponse(status: HttpStatus) {
  if (status === HttpStatus.OK) {
    console.log("성공!");
  }
}

enum OrderStatus {
  Pending = "PENDING",
  Processing = "PROCESSING",
  Shipped = "SHIPPED",
  Delivered = "DELIVERED",
  Cancelled = "CANCELLED"
}

const order = {
  id: 1,
  status: OrderStatus.Pending
};
console.log(order.status); // "PENDING"

const enum Color {
  Red = "#FF0000",
  Green = "#00FF00",
  Blue = "#0000FF"
}

const bg = Color.Red;
// 컴파일 결과: const bg = "#FF0000";
// (enum 객체가 생성되지 않고, 값이 직접 대체됨)

// 방법 1: 리터럴 유니온 타입
type Direction = "up" | "down" | "left" | "right";

// 방법 2: as const 객체 (값과 타입을 모두 사용 가능)
const STATUS = {
  Pending: "PENDING",
  Active: "ACTIVE",
  Closed: "CLOSED",
} as const;

type Status = typeof STATUS[keyof typeof STATUS];
// 결과: "PENDING" | "ACTIVE" | "CLOSED"

// 1. typeof 가드
function process(value: string | number) {
  if (typeof value === "string") {
    value.toUpperCase(); // ✅ value: string
  } else {
    value.toFixed(2);    // ✅ value: number
  }
}

// 2. instanceof 가드
function formatDate(input: Date | string) {
  if (input instanceof Date) {
    return input.toISOString(); // ✅ input: Date
  }
  return new Date(input).toISOString(); // input: string
}

// 3. in 연산자 가드
interface Bird { fly(): void; layEggs(): void; }
interface Fish { swim(): void; layEggs(): void; }

function move(animal: Bird | Fish) {
  if ("fly" in animal) {
    animal.fly();  // ✅ animal: Bird
  } else {
    animal.swim(); // ✅ animal: Fish
  }
}

// 4. Truthiness 가드 (null/undefined 체크)
function print(value: string | null | undefined) {
  if (value) {
    value.toUpperCase(); // ✅ value: string (null과 undefined 제외됨)
  }
}

interface Cat { meow(): void; purr(): void; }
interface Dog { bark(): void; fetch(): void; }

// 사용자 정의 타입 가드: 반환 타입이 "animal is Cat"
function isCat(animal: Cat | Dog): animal is Cat {
  return "meow" in animal;
}

function handlePet(pet: Cat | Dog) {
  if (isCat(pet)) {
    pet.purr();  // ✅ pet: Cat
  } else {
    pet.fetch(); // ✅ pet: Dog
  }
}

// 실전 예시: API 응답 검증
interface SuccessResponse { status: "ok"; data: unknown; }
interface ErrorResponse { status: "error"; message: string; }

function isSuccess(res: SuccessResponse | ErrorResponse): res is SuccessResponse {
  return res.status === "ok";
}

type Shape = Circle | Rectangle | Triangle;

function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":    return Math.PI * shape.radius ** 2;
    case "rectangle": return shape.width * shape.height;
    case "triangle":  return (shape.base * shape.height) / 2;
    default: {
      // 모든 케이스를 처리했다면 여기 도달할 수 없으므로 shape은 never
      const _exhaustive: never = shape;
      return _exhaustive;
      // 새로운 Shape 타입이 추가되면 여기서 컴파일 에러 발생!
    }
  }
}

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

// Partial<T> — 모든 속성을 선택적으로
type UpdateUserDto = Partial<User>;
// { id?: number; name?: string; email?: string; age?: number; }

// Required<T> — 모든 속성을 필수로
type StrictUser = Required<User>;

// Readonly<T> — 모든 속성을 읽기 전용으로
type FrozenUser = Readonly<User>;
// 모든 속성 수정 불가

// Pick<T, K> — 특정 속성만 선택
type UserPreview = Pick<User, "id" | "name">;
// { id: number; name: string; }

// Omit<T, K> — 특정 속성을 제외
type CreateUserDto = Omit<User, "id">;
// { name: string; email: string; age: number; }

// Record<K, V> — 키-값 쌍의 타입 정의
type UserRoles = Record<string, "admin" | "user" | "guest">;
// { [key: string]: "admin" | "user" | "guest" }

type AllStatuses = "active" | "inactive" | "pending" | "deleted";

// Exclude<T, U> — T에서 U에 해당하는 것 제외
type ActiveStatuses = Exclude<AllStatuses, "deleted" | "inactive">;
// "active" | "pending"

// Extract<T, U> — T에서 U에 해당하는 것만 추출
type DeadStatuses = Extract<AllStatuses, "inactive" | "deleted">;
// "inactive" | "deleted"

// NonNullable<T> — null과 undefined 제거
type MaybeString = string | null | undefined;
type DefiniteString = NonNullable<MaybeString>;
// string

function createUser(name: string, age: number, email: string): User {
  return { id: Date.now(), name, age, email };
}

// ReturnType<T> — 함수의 반환 타입 추출
type NewUser = ReturnType<typeof createUser>;
// User

// Parameters<T> — 함수의 매개변수 타입을 튜플로 추출
type CreateUserParams = Parameters<typeof createUser>;
// [name: string, age: number, email: string]

// Awaited<T> — Promise의 resolved 타입 추출 (TypeScript 4.5+)
type ApiData = Awaited<Promise<User[]>>;
// User[]

// 실전: API 엔드포인트별 요청/응답 타입 관리
interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user";
  createdAt: Date;
}

// 생성 시: id와 createdAt은 서버에서 생성
type CreateUserRequest = Omit<User, "id" | "createdAt">;

// 수정 시: 모든 필드 선택적, 단 id는 필수
type UpdateUserRequest = Partial<CreateUserRequest> & Pick<User, "id">;

// 목록 응답: 민감 정보 제외
type UserListItem = Pick<User, "id" | "name" | "role">;

// 기본 조건부 타입
type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<string>;  // "yes"
type B = IsString<number>;  // "no"

// 실전: 배열이면 요소 타입 추출, 아니면 그대로
type Flatten<T> = T extends (infer Item)[] ? Item : T;

type Str = Flatten<string[]>;  // string
type Num = Flatten<number>;    // number (배열이 아님)

// Partial<T>의 실제 구현
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

// Readonly<T>의 실제 구현
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

// 커스텀: 모든 속성을 nullable로 변환
type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

// 커스텀: 모든 속성을 getter 함수로 변환
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

interface Person { name: string; age: number; }
type PersonGetters = Getters<Person>;
// { getName: () => string; getAge: () => number; }

type Color = "red" | "blue" | "green";
type Size = "sm" | "md" | "lg";

// 모든 조합 자동 생성!
type ClassName = `${Color}-${Size}`;
// "red-sm" | "red-md" | "red-lg" | "blue-sm" | "blue-md" | "blue-lg" | ...

// CSS 속성 이름 패턴
type CSSProperty = `${"margin" | "padding"}-${"top" | "right" | "bottom" | "left"}`;
// "margin-top" | "margin-right" | ... | "padding-left"

// 이벤트 핸들러 이름 패턴
type EventName = "click" | "focus" | "blur";
type Handler = `on${Capitalize<EventName>}`;
// "onClick" | "onFocus" | "onBlur"

// Promise의 내부 타입 추출
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type A = UnwrapPromise<Promise<string>>;  // string
type B = UnwrapPromise<number>;            // number

// 함수의 첫 번째 매개변수 타입 추출
type FirstArg<T> = T extends (first: infer F, ...args: any[]) => any ? F : never;

type C = FirstArg<(name: string, age: number) => void>; // string

// Named Export (이름 있는 내보내기)
export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

export const PI = 3.14159;

// Default Export (기본 내보내기) — 모듈당 하나
export default class Calculator {
  evaluate(expr: string): number { /* ... */ return 0; }
}

// Named Import
import { add, subtract, PI } from "./math.js";

// Default Import
import Calculator from "./math.js";

// 별칭 지정
import { add as sum } from "./math.js";

// 전체 가져오기
import * as MathUtils from "./math.js";

// 타입만 가져오기 (컴파일 후 완전히 제거됨)
import type { User } from "./types.js";

// 메서드 데코레이터: 실행 시간 측정
function log(
  target: any,
  context: ClassMethodDecoratorContext
) {
  const methodName = String(context.name);

  return function (this: any, ...args: any[]) {
    console.log(`→ ${methodName} 호출, 인자:`, args);
    const start = performance.now();
    const result = target.call(this, ...args);
    const end = performance.now();
    console.log(`← ${methodName} 완료 (${(end - start).toFixed(2)}ms)`);
    return result;
  };
}

class MathService {
  @log
  factorial(n: number): number {
    return n <= 1 ? 1 : n * this.factorial(n - 1);
  }
}

const math = new MathService();
math.factorial(10);
// → factorial 호출, 인자: [10]
// ← factorial 완료 (0.05ms)

// 클래스에 메타데이터 추가
function sealed(constructor: Function, context: ClassDecoratorContext) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class BankAccount {
  constructor(public owner: string, private balance: number) {}

  deposit(amount: number) { this.balance += amount; }
  getBalance() { return this.balance; }
}

# JavaScript 라이브러리의 타입 설치
npm install -D @types/node       # Node.js API 타입
npm install -D @types/react      # React 타입
npm install -D @types/lodash     # Lodash 타입

# 최근의 라이브러리는 타입이 내장되어 있어 별도 설치 불필요
# (package.json에 "types" 필드가 있음)
npm install zod       # 타입 내장
npm install axios     # 타입 내장

// 전역 변수 선언 (window에 추가된 변수 등)
declare const APP_VERSION: string;
declare const __DEV__: boolean;

// 외부 모듈 선언 (타입이 없는 라이브러리)
declare module "some-untyped-lib" {
  export function doSomething(input: string): number;
  export default class Client {
    constructor(options: { apiKey: string });
    fetch(url: string): Promise<any>;
  }
}

// 파일 모듈 선언 (이미지, CSS 등 비-JS 파일)
declare module "*.png" {
  const src: string;
  export default src;
}

declare module "*.css" {
  const classes: { readonly [key: string]: string };
  export default classes;
}

{
  "compilerOptions": {
    // ─── 기본 설정 ───
    "target": "ES2022",              // 출력 JavaScript 버전
    "module": "nodenext",            // 모듈 시스템
    "moduleResolution": "nodenext",  // 모듈 해석 전략
    "lib": ["ES2022", "DOM"],        // 사용할 내장 타입 라이브러리

    // ─── 출력 설정 ───
    "outDir": "./dist",              // 컴파일 결과 디렉터리
    "rootDir": "./src",              // 소스 루트 디렉터리
    "declaration": true,             // .d.ts 파일 생성
    "sourceMap": true,               // 디버깅용 소스맵 생성

    // ─── 엄격한 타입 검사 (모두 켜는 것을 강력 추천) ───
    "strict": true,                  // 아래 모든 strict 옵션을 한번에 활성화
    // "noImplicitAny": true,        — 암묵적 any 금지
    // "strictNullChecks": true,     — null/undefined 엄격 검사
    // "strictFunctionTypes": true,  — 함수 타입 엄격 검사
    // "strictBindCallApply": true,  — bind/call/apply 엄격 검사
    // "noImplicitThis": true,       — 암묵적 this 금지
    // "alwaysStrict": true,         — 항상 strict mode

    // ─── 추가 검사 ───
    "noUnusedLocals": true,          // 사용하지 않는 지역 변수 에러
    "noUnusedParameters": true,      // 사용하지 않는 매개변수 에러
    "noFallthroughCasesInSwitch": true, // switch fallthrough 에러
    "forceConsistentCasingInFileNames": true, // 파일명 대소문자 일관성

    // ─── 호환성 ───
    "esModuleInterop": true,         // CommonJS/ESM 상호 운용
    "skipLibCheck": true,            // .d.ts 타입 검사 건너뛰기 (속도↑)
    "resolveJsonModule": true,       // JSON import 허용

    // ─── 타입 패키지 ───
    "types": ["node"]                // 6.0부터 명시적 지정 권장
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

// 제네릭 API 래퍼
interface ApiSuccess<T> {
  ok: true;
  data: T;
}

interface ApiError {
  ok: false;
  error: {
    code: string;
    message: string;
  };
}

type ApiResult<T> = ApiSuccess<T> | ApiError;

// 타입 안전한 fetch 래퍼
async function fetchApi<T>(url: string): Promise<ApiResult<T>> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      return { ok: false, error: { code: "HTTP_ERROR", message: response.statusText } };
    }
    const data: T = await response.json();
    return { ok: true, data };
  } catch (e) {
    return { ok: false, error: { code: "NETWORK_ERROR", message: String(e) } };
  }
}

// 사용: 판별 유니온으로 안전하게 처리
interface User { id: number; name: string; }

const result = await fetchApi<User[]>("/api/users");
if (result.ok) {
  result.data.forEach(user => console.log(user.name)); // ✅ data: User[]
} else {
  console.error(result.error.message); // ✅ error 접근 가능
}

class QueryBuilder<T> {
  private filters: string[] = [];
  private sortField?: keyof T;
  private limitCount?: number;

  where(field: keyof T, op: "=" | "!=" | ">" | "<", value: unknown): this {
    this.filters.push(`${String(field)} ${op} ${value}`);
    return this;
  }

  orderBy(field: keyof T): this {
    this.sortField = field;
    return this;
  }

  limit(n: number): this {
    this.limitCount = n;
    return this;
  }

  build(): string {
    let query = "SELECT * FROM table";
    if (this.filters.length) query += ` WHERE ${this.filters.join(" AND ")}`;
    if (this.sortField) query += ` ORDER BY ${String(this.sortField)}`;
    if (this.limitCount) query += ` LIMIT ${this.limitCount}`;
    return query;
  }
}

interface Product { id: number; name: string; price: number; }

const query = new QueryBuilder<Product>()
  .where("price", ">", 1000)     // ✅ "price"는 Product의 키
  .where("name", "!=", "test")   // ✅
  .orderBy("price")              // ✅
  .limit(10)
  .build();
// "SELECT * FROM table WHERE price > 1000 AND name != test ORDER BY price LIMIT 10"

// 이벤트 맵을 제네릭으로 정의
type EventMap = {
  login: { userId: string; timestamp: Date };
  logout: { userId: string };
  purchase: { productId: number; amount: number };
};

class TypedEmitter<Events extends Record<string, any>> {
  private handlers = new Map<string, Set<Function>>();

  on<K extends keyof Events>(event: K, handler: (data: Events[K]) => void): void {
    const key = event as string;
    if (!this.handlers.has(key)) this.handlers.set(key, new Set());
    this.handlers.get(key)!.add(handler);
  }

  emit<K extends keyof Events>(event: K, data: Events[K]): void {
    this.handlers.get(event as string)?.forEach(h => h(data));
  }
}

const emitter = new TypedEmitter<EventMap>();

emitter.on("login", (data) => {
  console.log(data.userId);    // ✅ 자동완성: userId, timestamp
});

emitter.emit("purchase", {
  productId: 42,
  amount: 29900               // ✅ 타입 검사됨
});

emitter.emit("login", { wrong: true }); // ❌ 타입 에러!

# TypeScript 7.0 네이티브 프리뷰 설치 (npm)
npm install -D @typescript/native-preview

# VS Code 확장 설치로 에디터에서 바로 체험 가능

/* =============================================
   TypeScript 치트시트 - 한눈에 보는 타입 시스템
   ============================================= */

/* ── 1. 기본 타입 ── */
let str: string = "hello";
let num: number = 42;
let bool: boolean = true;
let nul: null = null;
let undef: undefined = undefined;
let big: bigint = 100n;
let sym: symbol = Symbol("id");

/* ── 2. 특수 타입 ── */
let anything: any;       // 타입 검사 비활성화 (사용 지양)
let safe: unknown;       // 안전한 any (사용 전 타입 확인 필수)
function fail(): never { throw new Error(); }  // 반환 없음
function log(): void { console.log("hi"); }    // 반환값 무시

/* ── 3. 배열과 튜플 ── */
let arr: number[] = [1, 2, 3];
let arr2: Array<string> = ["a", "b"];
let tuple: [string, number] = ["age", 28];
let rest: [string, ...number[]] = ["scores", 90, 85];

/* ── 4. 객체 타입 ── */
interface User {
  id: number;
  name: string;
  email?: string;           // 선택적 속성
  readonly createdAt: Date;  // 읽기 전용
}
type Point = { x: number; y: number };

/* ── 5. 유니온 & 인터섹션 ── */
type ID = string | number;           // 유니온: 둘 중 하나
type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged;          // 인터섹션: 둘 다 합침

/* ── 6. 리터럴 & as const ── */
type Dir = "up" | "down" | "left" | "right";
const CONFIG = { api: "/v1", timeout: 3000 } as const;
// typeof CONFIG = { readonly api: "/v1"; readonly timeout: 3000 }

/* ── 7. 제네릭 ── */
function identity<T>(value: T): T { return value; }
interface Box<T> { content: T; }
type Pair<A, B> = { first: A; second: B };

/* ── 8. 유틸리티 타입 ── */
Partial<T>       // 모든 속성 선택적
Required<T>      // 모든 속성 필수
Readonly<T>      // 모든 속성 읽기전용
Pick<T, K>       // 특정 속성만 선택
Omit<T, K>       // 특정 속성 제외
Record<K, V>     // 키-값 매핑 타입
Exclude<T, U>    // T에서 U 제외
Extract<T, U>    // T에서 U만 추출
NonNullable<T>   // null | undefined 제거
ReturnType<T>    // 함수 반환 타입
Parameters<T>    // 함수 매개변수 타입 (튜플)
Awaited<T>       // Promise 내부 타입

/* ── 9. 타입 가드 ── */
typeof x === "string"        // 원시 타입 체크
x instanceof Date            // 클래스 인스턴스 체크
"key" in obj                 // 속성 존재 체크
function isFoo(x: any): x is Foo { ... }  // 커스텀 가드

/* ── 10. 조건부 타입 ── */
type IsStr<T> = T extends string ? "yes" : "no";
type Flat<T> = T extends (infer U)[] ? U : T;

/* ── 11. 매핑된 타입 ── */
type Nullable<T> = { [K in keyof T]: T[K] | null };
type Getters<T> = { [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K] };

/* ── 12. 템플릿 리터럴 타입 ── */
type EventName = `on${Capitalize<"click" | "focus">}`;
// "onClick" | "onFocus"

/* ── 13. 클래스 ── */
class Foo {
  public x: number;     // 어디서든 접근
  private y: number;    // 클래스 내부만
  protected z: number;  // 내부 + 자식
  readonly w: number;   // 수정 불가

  constructor(public name: string) {} // 축약 선언
}
abstract class Base { abstract method(): void; }

/* ── 14. 모듈 ── */
export { foo };
export default class Bar {}
import { foo } from "./mod.js";
import type { MyType } from "./types.js";